import {Component, Input, OnInit} from '@angular/core';
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import Graticule from 'ol/Graticule';
import GeoJSON from 'ol/format/GeoJSON.js';
import VectorLayer from 'ol/layer/Vector.js';
import Projection from 'ol/proj/Projection.js';
import VectorSource from 'ol/source/Vector.js';
import {register} from 'ol/proj/proj4.js';
import proj4 from 'proj4';
import {UtilComponent} from '../../interface/util-component.interface';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
@Component({
    selector: 'kylin-sphere',
    templateUrl: './sphere.component.html',
    styleUrls: ['./sphere.component.less']
})
export class SphereComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;
    view: View;
    @Input() set data(val) {
        Object.assign(this, val);
    };
    // ---------- 接口实现 end ---------------- //
    sphereMollweideProjection;
    vectorLayer;
    graticule;
    newView;
    con;
    originView;
    baseLayer;
    constructor() {
    }

    ngOnInit() {
        const originView = this.map.getView();
        this.originView = {
            center: originView.getCenter(),
            zoom: originView.getZoom(),
            proj: originView.getProjection()
        };

        proj4.defs('ESRI:53009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +a=6371000 ' +
            '+b=6371000 +units=m +no_defs');
        register(proj4);

        const tile = this.map.getLayers().getArray()[0];
        this.baseLayer = tile;
        this.map.removeLayer(tile);

        this.map.setProperties({
            keyboardEventTarget: document,
        });
        this.vectorLayer = new VectorLayer({
            source: new VectorSource({
                url: './assets/data/geojson/countries-110m.json',
                format: new GeoJSON()
            })
        });
        this.map.addLayer(this.vectorLayer);

        this.sphereMollweideProjection = new Projection({
            code: 'ESRI:53009',
            extent: [-9009954.605703328, -9009954.605703328, 9009954.605703328, 9009954.605703328],
            worldExtent: [-179, -89.99, 179, 89.99],
        });
        this.newView = new View({
            center: [0, 0],
            projection: this.sphereMollweideProjection,
            resolutions: [65536, 32768, 16384, 8192, 4096, 2048],
            zoom: 0
        });
        this.map.setView(this.newView);
        this.graticule = new Graticule({
        });
        this.map.addControl(this.graticule)
    }

    cancel(options?: any): any {
        this.map.removeLayer(this.vectorLayer);
        this.map.getLayers().getArray().slice(1).map(data => {
            this.map.removeLayer(data);
        });
        this.map.addLayer(this.baseLayer);
        this.view =  new View({
            zoom: this.originView.zoom,
            center: this.originView.center,
            projection: this.originView.proj,
            minZoom: 0
        });
        this.map.setView(this.view);
        this.map.removeControl(this.graticule)
    }
}
